<template>
  <div class="course-detail-container">
    <div class="course-header">我的课程</div>
    <div class="course-content">
      <div class="course-info">
        <div class="image-box">课程图片</div>
        <button class="course-title-button" @click="goToCoursePage">{{ course.title }}</button>
      </div>
      <div class="course-description">
        <!-- 课程描述内容 -->
        <p>{{ course.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      course: {
        image: 'path/to/course/image.jpg', // 课程图片路径
        title: '课程名称', // 课程名称
        description: '' // 课程描述
      },
    };
  },
  methods: {
    goToCoursePage() {
      // 跳转到课程页面的逻辑
      console.log('跳转到课程页面');
      uni.navigateTo({
        url: "/pages/studentmassage/studentmassage"
      });
    }
  }
};
</script>

<style scoped>
.course-detail-container {
  padding: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.course-header {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 50px;
}

.course-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px; /* 添加上边距 */
}

.course-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.image-box,
.course-title-button {
  border: 1px solid #d9d9d9;
  padding: 5px;
  margin-right: 10px;
  width: 100px; /* 设置宽度 */
  height: 100px; /* 设置高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.course-title-button {
  font-size: 16px;
  font-weight: bold;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.course-title-button:hover {
  background-color: #40a9ff;
}

.course-description {
  text-align: left;
}
</style>
